<div ng-controller="DemoCtrl as ctrl" ng-cloak>
  <md-content class="md-padding">
    <form ng-submit="$event.preventDefault()" name="searchForm">
      <p>The following example demonstrates floating labels being used as a normal form element.</p>
      <div layout-gt-sm="row" style="background-color: white" class="md-padding">
        <md-input-container flex>
          <label for="floatingLabelName">Name</label>
          <input id="floatingLabelName" type="text"/>
        </md-input-container>
        <md-autocomplete flex required
          md-input-name="autocompleteField"
          md-input-minlength="2"
          md-input-maxlength="18"
          md-no-cache="ctrl.noCache"
          md-selected-item="ctrl.selectedItem"
          md-search-text="ctrl.searchText"
          md-items="item in ctrl.querySearch(ctrl.searchText)"
          md-item-text="item.display"
          md-escape-options="clear"
          md-require-match=""
          md-floating-label="Favorite state"
          input-aria-describedby="favoriteStateDescription">
          <md-item-template>
            <span md-highlight-text="ctrl.searchText">{{item.display}}</span>
          </md-item-template>
          <div ng-messages="searchForm.autocompleteField.$error" ng-if="searchForm.autocompleteField.$touched">
            <div ng-message="required">You <b>must</b> have a favorite state.</div>
            <div ng-message="md-require-match">Please select an existing state.</div>
            <div ng-message="minlength">Your entry is not long enough.</div>
            <div ng-message="maxlength">Your entry is too long.</div>
          </div>
        </md-autocomplete>
        <p id="favoriteStateDescription" hide>
          A person's favorite state tells you a lot about them
        </p>
      </div>
    </form>
  </md-content>
</div>
